<template>
    <div class="wrap">
        <div class="container">
            <TopBreadCrumb></TopBreadCrumb>
            <div class="user_center_content">
                <!-- 左侧菜单 -->
                <LeftNavMenu></LeftNavMenu>
                <!-- 左侧菜单结束 -->
                <!-- 右侧内容开始  -->
                <div class="right_user_content">
                    <div class="right-title">
                        <div class="left">发票中心</div>
                        <div class="top-head">
                            
                        </div>
                    </div>
                    <div class="contract-content invoice-content">
                        <el-tabs v-model="activeName" type="card"  @tab-click="handleClick" class="invoice-tabs">
                            <el-tab-pane
                                :key="index"
                                v-for="(item, index) in tabsOptions"
                                :label="item.title"
                                :name="item.value"
                            >
                                <div class="tabs-content">
                                    <div class="contract-list invoice-list">
                                        <!-- 发票列表 -->
                                        <el-table
                                            :data="listData"
                                            style="width: 100%">
                                            <el-table-column
                                                prop="enterprise_namename"
                                                label="企业名称"
                                                >
                                            </el-table-column>
                                            <el-table-column
                                                prop="duty_paragraph"
                                                label="企业税号"
                                            >
                                            </el-table-column>
                                            <el-table-column
                                                prop="order_status"
                                                label="订单状态"
                                                align="center"
                                                width="120">
                                                <template>
                                                    <span>已发货</span>
                                                </template>
                                            </el-table-column>
                                            <el-table-column
                                                prop="invoicing_status"
                                                label="开票状态"
                                                align="center"
                                                width="130">
                                                <template>
                                                    <span>已开票未签收</span>
                                                </template>
                                            </el-table-column>
                                            <el-table-column
                                                prop="date"
                                                label="开票日期"
                                                align="center"
                                                width="120">
                                            </el-table-column>
                                            <el-table-column
                                                prop="operation"
                                                label="操作"
                                                align="center"
                                                width="90">
                                                <nuxt-link class="details" to="/agency/invoiceListShow/1">查看发票</nuxt-link>
                                            </el-table-column>
                                        </el-table>
                                        <!-- 发票列表 结束-->
                                        <Custom-pagination></Custom-pagination>
                                    </div>
                                </div>
                            </el-tab-pane>
                        </el-tabs>
                        
                    </div>
                </div>
                <!-- 右侧内容结束 -->
            </div>
        </div>

    </div>
</template>

<script>
import Vue from 'vue'
import $ from "jquery"
import api from "@/api/address"
import common from "@/api/common"
import { validatePhone } from "@/utils/common";
import CustomPagination from '../../components/CustomPagination.vue';

  export default {
    components: { CustomPagination },
    data() {
        return {
            tabsOptions: [
                {
                    title: '全部',
                    value: "0",
                },{
                    title: '已开票',
                    value: "1",
                },{
                    title: '未开票',
                    value: "3",
                },{
                    title: '已签收',
                    value: "5",
                }
            ],
            activeName: '0',
            listData: [
                {
                    enterprise_namename: "北京鑫康辰医学科技发展有限公司",
                    duty_paragraph: "9111 0108 7355 9148 9G",
                    date: "2023-06-30",
                }, {
                    enterprise_namename: "上海倍尔康医疗器械有限公司",
                    duty_paragraph: "9111 0108 7355 9148 9G",
                    date: "2023-06-30",
                }, {
                    enterprise_namename: "北京鑫康辰医学科技发展有限公司",
                    duty_paragraph: "9111 0108 7355 9148 9G",
                    date: "2023-06-30",
                }, {
                    enterprise_namename: "广东基顺隆医用复合膜有限公司",
                    duty_paragraph: "9111 0108 7355 9148 9G",
                    date: "2023-06-30",
                }, {
                    enterprise_namename: "北京鑫康辰医学科技发展有限公司",
                    duty_paragraph: "9111 0108 7355 9148 9G",
                    date: "2023-06-30",
                }, {
                    enterprise_namename: "北京鑫康辰医学科技发展有限公司",
                    duty_paragraph: "9111 0108 7355 9148 9G",
                    date: "2023-06-30",
                }, {
                    enterprise_namename: "北京鑫康辰医学科技发展有限公司",
                    duty_paragraph: "9111 0108 7355 9148 9G",
                    date: "2023-06-30",
                }
            ],
        };
    },
    created(){
        this.doLoadData()
    },
    methods: {
        doLoadData:function(){
            // let _this = this;
            // _this.loading = true
            // api.GetInvoiceList(this.query)
            // .then(res => {
            //     this.data = res.data;
            //         if (this.query.pageSize >= this.data.total) {
            //             this.pageHidden = false;
            //         }
            //         _this.loading = false
            // });
        },
        onSubmit(){

        },
        handleClick(tab, event) {
            console.log(tab, event);
        }
    },
    mounted: function(){
        
    }

  };
</script>
<style>



</style>